<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="record" labelWidth="150px" :rules="rules">
				<!--
        <uni-forms-item label="收运时间(提交时间)" name="collectionDate">
          <uni-easyinput v-model="record.collectionDate" placeholder="请输入收运时间" />
        </uni-forms-item>	-->
				<uni-forms-item label="商户名称" name="merchantName">
					<uni-easyinput v-model="record.merchantName" placeholder="请输入商户名称" disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="操作人" name="userName">
					<uni-easyinput v-model="record.userName" placeholder="请输入操作人" disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="GPS定位坐标" name="location">
					<uni-easyinput v-model="record.location" placeholder="请输入GPS定位坐标" disabled="true" />
					<button type="primary" @click="getLocation" size="mini">重新获取</button>
				</uni-forms-item>
				<uni-forms-item label="实际到达时间" name="arriveTime">
					<uni-easyinput v-model="record.arriveTime" placeholder="请输入实际到达时间" disabled="true" />
				</uni-forms-item>
				<uni-forms-item label="地上油收油量(公斤)" name="groundQuantity" v-if="record.type.includes(2)">
					<uni-number-box :max="9999" v-model="record.groundQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地上油单价(元/公斤)" name="groundPrice" v-if="record.type.includes(2)">
					<uni-number-box :max="9999" v-model="record.groundPrice" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="地下油收油量(公斤)" name="undergroundQuantity" v-if="record.type.includes(3)">
					<uni-number-box :max="9999" v-model="record.undergroundQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="灶台油收油量(公斤)" name="stoveQuantity" v-if="record.type.includes(1)">
					<uni-number-box :max="9999" v-model="record.stoveQuantity" :step="0.01" />
				</uni-forms-item>
				<uni-forms-item label="车牌号" name="carNumber">
					<uni-data-select v-model="record.carNumber" :localdata="options" />
				</uni-forms-item>
			</uni-forms>
			<view>

			</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="8" :offset="8">
					<view class="demo-uni-col light">
						<button type="primary" @click="submit">提交</button>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import {
		addRecord
	} from "@/api/system/record"
	import {
		formatDate
	} from '@/utils/common.js';
import {
	getDicts
} from "@/api/system/dict/data";
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	


	export default {
		data() {
			return {
				options: [],
				// 表单校验
				rules: {
					location: {
						rules: [{
							required: true,
							errorMessage: '请获取GPS定位坐标',
						}]
					},
					carNumber: {
						rules: [{
							required: true,
							errorMessage: '请填写车牌号',
						}]
					}
				},
				record: {
					merchantId: "",
					userId: "1",
					collectionDate: "",
					location: "",
					arriveTime: "",
					groundQuantity: "",
					groundPrice: "",
					undergroundQuantity: "",
					stoveQuantity: "",
					locationName: "",
					type:""
				},
				x: 0,
				y: 0
			}
		},
		onLoad(options) {
			// 获取商户id 名称
			this.record.merchantId = options.merchantId;
			this.record.type = options.type;
			console.log(options)
			this.record.merchantName = decodeURIComponent(options.merchantName);
			// 获取GPS坐标
			this.getLocation()
			// 抵达时间
			this.record.arriveTime = formatDate(Date.now(), 'yyyy-MM-dd hh:mm:ss');
			// 用户信息
			this.record.userName = this.$store.state.user.name;
			// 数据字典
			getDicts("sys_car_number").then(response => {
				this.options = response.data.map(item => ({
					value: item.dictValue,
					text: item.dictLabel
				}))
			})
		},
		methods: {
			checkPermi,
			checkRole,
			// 提交数据
			submit(ref) {
				// 收运时间
				// const formattedDate = formatDate(Date.now(), 'yyyy-MM-dd hh:mm:ss');
				// this.record.collectionDate = formattedDate;
				this.$refs.form.validate().then(res => {
					addRecord(this.record).then(response => {
						if (response.code === 200) {
							uni.showToast({
								title: response.msg
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							});
						}
					})
				})
			},
			// 获取GPS坐标
			getLocation() {
				let that = this

				// h5测试
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		that.x = res.longitude
				// 		that.y = res.latitude
				// 		console.log(res)
				// 		console.log('当前位置的经度：' + res.longitude)
				// 		console.log('当前位置的纬度：' + res.latitude)
				// 		uni.showToast({
				// 			title: '当前位置的经纬度：' + res.longitude +
				// 				',' + res.latitude,
				// 			icon: 'success',
				// 			mask: true
				// 		})
				// 	},
				// 	fail(error) {
				// 		console.log('失败', error)
				// 	}
				// })

				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res)

						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											that.x = res.longitude
											that.y = res.latitude
											that.record.location = that.x + "," + that.y
											console.log(res)
											// console.log('当前位置的经度：' + res.longitude)
											// console.log('当前位置的纬度：' + res.latitude)
											uni.showToast({
												title: '当前位置的经纬度：' + res.longitude +
													',' + res.latitude,
												icon: 'success',
												mask: true
											})
										},
										fail(error) {
											console.log('失败', error)
										}
									})
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)

									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success(res) {
											console.log(res)
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success(res) {
														console.log(res.authSetting)
													}
												})
											} else if (res.cancel) {
												// 选择弹框内 不授权
												console.log('用户点击不授权')
											}
										}
									})
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									that.x = res.longitude
									that.y = res.latitude
									that.record.location = that.x + "," + that.y
									console.log(res)
									console.log('当前位置的经度：' + res.longitude)
									console.log('当前位置的纬度：' + res.latitude)
									uni.showToast({
										title: '当前位置的经纬度：' + res.longitude + ',' + res
											.latitude,
										icon: 'success',
										mask: true
									})
								},
								fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error)
								}
							})
						}
					}
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>